<script setup lang="ts">
import RoomStatus from './components/RoomStatus.vue'
import RoomAction from './components/RoomAction.vue'
import RoomMessage from './components/RoomMessage.vue'

import io from 'socket.io-client'
import { useUserStore } from '@/stores'
import { useRoute } from 'vue-router'
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
import type { Message, TimeMessages } from '@/types/room'
import { MsgType, OrderType } from '@/enums'
import { getConsultOrderDetail } from '@/services/consult'
import type { ConsultOrderItem } from '@/types/consult'

const store = useUserStore()
const route = useRoute()

const list = ref<Message[]>([]) // 聊天记录

// 参数1：不传默认是当前服务域名，开发中传入服务器地址
// 参数2：配置参数，根据接口传
const socket = io('https://consult-api.itheima.net', {
  // 身份验证
  auth: { token: 'Bearer ' + store.user?.token },
  // 查询参数  订单id
  query: { orderId: route.query.orderId },
  // transports: ['websocket', 'polling'],
  // timeout: 5000,
})

socket.on('connect', () => {
  // 建立连接成功
  console.log('连接成功')
})
socket.on('disconnect', () => {
  // 断开连接
  console.log('断开连接')
})
// 监听错误
socket.on('error', (err) => {
  console.log('错误了', err)
})
// 获取默认聊天记录 需要处理格式
socket.on('chatMsgList', async ({ data }: { data: TimeMessages[] }) => {
  // 准备转换常规消息列表
  console.log(data, 999)
  const arr: Message[] = []
  data.forEach((item) => {
    // item 时间段
    arr.push({
      msgType: MsgType.Notify,
      // 造出来的这条消息 内容就是时间本身
      msg: { content: item.createTime },
      createTime: item.createTime,
      id: item.createTime
    })
    arr.push(...item.items)
  })
  // 追加到聊天消息列表
  list.value.unshift(...arr)

  await nextTick()
  window.scrollTo(0, document.body.scrollHeight)

  // // ev 是服务器发送的消息
  // console.log(ev.data)
  // // 数组里根本不是消息  是一堆"时间段对象"
  // // 一个对象 描述的是一个时间段  里面有个字段items  消息列表

  // ev.data.forEach((obj) => {
  //   // obj 一个时间段
  //   // obj.items 这个时间段的所有消息
  //   // 单独处理这个时间段的开始时间 也作为一个消息 push进去
  //   list.value.push(...obj.items)
  // })


})

const consult = ref<ConsultOrderItem>()

onMounted(async() => {
  // 1.进入页面时已经是接诊中了 通过事件收不到消息 => 只能在进入页面时主动请求获取订单状态
  const res = await getConsultOrderDetail(route.query.orderId as string)
  console.log(res.data) // 存下来  订单状态 订单的倒计时
  consult.value = res.data
})
//
// 2.订单状态确实是在 进入聊天室后 才改变的 接受到订单状态
// 获取订单状态
socket.on('statusChange', async(ev) => {
  // ev 是服务器发送的消息
  console.log(ev, '订单状态改变')
  // 再发请求  为了拿到订单的倒计时
  const res = await getConsultOrderDetail(route.query.orderId as string)
  console.log(res.data) // 存下来  订单状态 订单的倒计时
  consult.value = res.data
})


onUnmounted(() => {
  socket.close() // 组件卸载关闭连接
})

const sendText = (text: string) => {
  // 发送消息给服务器
  socket.emit('sendChatMsg', {
    from: store.user?.id, // 发消息的人
    to: consult.value?.docInfo.id, // 接收消息的人
    msgType: MsgType.MsgText, // 消息类型
    msg: {
      content: text, // 文本内容
    },
  })
}


// 获取服务器推送的消息（你的消息  对方的消息）
socket.on('receiveChatMsg', async (ev) => {
  // ev 是服务器发送的消息
  console.log(ev)
  list.value.push(ev) // 收到的消息添加到列表中

  await nextTick() // 视图更新后滚动

  // 收到消息后，滚动到底部
  // document.body.scrollHeight 网页的高度 含滚动
  window.scrollTo(0, document.body.scrollHeight)
})






// setTimeout(() => {
//   socket.close()
// }, 6000);
// // 发送消息给服务器
// socket.emit('sendChatMsg', '消息内容')
// // 发送消息告诉服务器哪条消息已读
// socket.emit('updateMsgStatus')
// // 发送消息给服务器获取聊天记录
// socket.emit('getChatMsgList')

// // 获取服务器推送的消息（你的消息  对方的消息）
// socket.on('receiveChatMsg', (ev) => {
//   // ev 是服务器发送的消息
//   console.log(ev)
// })
// // 获取默认聊天记录
// socket.on('chatMsgList', (ev) => {
//   // ev 是服务器发送的消息
//   console.log(ev)
// })
// // 获取订单状态
// socket.on('statusChange', (ev) => {
//   // ev 是服务器发送的消息
//   console.log(ev)
// })

// // 离开组件需要使用
// socket.close()

</script>

<template>
  <div class="room-page">
    <!-- room页面 -->
    <van-nav-bar fixed title="问诊室" left-arrow></van-nav-bar>

    <!-- 传入聊天室的状态 -->
    <!-- 聊天室状态 第一行 -->
    <!-- 倒计时 和 状态单独传入 -->
    <RoomStatus :status="consult?.status" :countdown="consult?.countdown"></RoomStatus>

    <!-- 消息组件（所有消息都用这个组件？） -->
    <!--
      给这个组件传入足够多的数据即可：
        消息的文字  图片
        消息的发送人头像
        消息的发送人
        消息的时间


      特殊的消息也是消息
    -->
    <!-- 一个RoomMessage组件展示一个消息 具体什么消息 看你传什么数据 -->
    <!-- 患者发送文字 -->
    <!-- <RoomMessage></RoomMessage> -->
    <!-- 医生回复文字 -->
    <!-- <RoomMessage></RoomMessage> -->

    <RoomMessage :list="list"></RoomMessage>


    <!-- 消息哪儿来？   服务器怎么给你？ -->
    <!-- 1."发请求"拿来的消息 但是不具备及时性 =》 每过一秒请求一次服务器（轮询）  服务器压力太大  -->
    <!-- 2.websocket -->

    <!-- 操作栏 最后一行 -->
    <RoomAction @send-text="sendText" :disabled="consult?.status !== OrderType.ConsultChat"></RoomAction>
  </div>
</template>

<style lang="scss" scoped>
.room-page {
  padding-top: 90px;
  padding-bottom: 60px;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: var(--cp-bg);
  .van-pull-refresh {
    width: 100%;
    min-height: calc(100vh - 150px);
  }
}
</style>
